<!--
  Generated template for the FormCreatePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.

<ion-header>

  <ion-navbar>
    <ion-title>formCreate</ion-title>
  </ion-navbar>

</ion-header>
-->

<ion-content padding>
    <p>说明：</p>
    <p>先添加行，定义行属性后再添加字段组件</p>
      <div id="container">
          <div id="left">
              <div id="addFields">
                <h3 class="fields-group">添加控件</h3>
                <ul id="col1">
                  <li id="drag_text" (click)="addTable()" ftype="text" class="ui-draggable" #addTableContainer><span id="sl" class="btn-field" title="关联表" ><i class="iconfont"></i>关联表</span></li>
                  <li id="drag_text" (click)="addRow()" ftype="text" class="ui-draggable"><span id="sl" class="btn-field" title="新增一行。" ><i class="iconfont"></i>添加行</span></li>
                  <li id="drag_text" (click)="addText()" ftype="text" class="ui-draggable"><span id="sl" class="btn-field" title="适用于填写简短的文字内容，身份证号、银行卡号、工号等请使用此类型。" ><i class="iconfont"></i>单行文本</span></li>
                  <li id="drag_textarea" (click)="addTextarea()" ftype="textarea" class="ui-draggable"><span id="pt" class="btn-field" title="适用于填写大段文本，如“备注”、“留言”" ><i class="iconfont"></i>多行文本</span></li>
                  <li id="drag_radio" (click)="addRadio()" ftype="radio" class="ui-draggable"><span id="mc" class="btn-field" title="适用于在少量选项里选一个，如“男/女”" ><i class="iconfont"></i>单选框</span></li>
                  <li ftype="date" (click)="addDate()" class="ui-draggable"><span id="dt" class="btn-field" title="适用于选择特定的日期" ><i class="iconfont"></i>日期</span></li>
                  
                </ul>
                <ul id="col2">
                  <li id="drag_number" (click)="addNumber()" ftype="number" class="ui-draggable"><span id="nb" class="btn-field" title="适用于填写涉及到数学运算的数字，身份证号、银行卡号、工号等请使用单行文本。" ><i class="iconfont"></i>数字</span></li>
                  <li id="drag_checkboxes" (click)="addCheckbox()" ftype="checkbox" class="ui-draggable"><span id="cb" class="btn-field" title="适用于在几个选项里选多个，如投票" ><i class="iconfont"></i>多选框</span></li>
                  <li id="drag_dropdown" (click)="addSelect()" ftype="dropdown" class="ui-draggable"><span id="dd" class="btn-field" title="适用于在非常多的选项里选一个，如省份选择" ><i class="iconfont"></i>下拉框</span></li>
                  <li ftype="time" (click)="addTime()" class="ui-draggable"><span id="ti" class="btn-field" title="适用于填写特定的时间" ><i class="iconfont"></i>时间</span></li>
                  <li ftype="file" (click)="addFile()" class="ui-draggable"><span id="fu" class="btn-field" title="适用于收集文件，如简历、照片" ><i class="iconfont"></i>文件上传</span></li>
                 </ul>
              </div>       
          </div>
  
          <div id="middle">
              <div id="fbForm" class="form form-focused form-default" (click)="showFormAttr()">
                <h2 id="fTitle">{{currentTable.title}}</h2>
                <div id="fDescription">{{currentTable.comment}}</div>
              </div>
  
              <div id="nofields" class="notice" *ngIf="isNoticeHide==0">
                  <div id="addFromButton" style="cursor:pointer;">
                  <h2 class="color-red">没有字段!</h2>
                  <a >表单中没有字段，点击或拖动左边的组件添加字段。</a>
                  </div>
              </div>
        
              <ul id="fields" class="fields ui-sortable" #fields></ul>
        
              <div class="formButtons" id="formButtons">
                  <table style="margin:auto;font-size:1.0em">
                      <tbody>
                          <tr>
                              <td style="border:none;"><span class="btn left" id="preview" target="_blank" (click)="getJson()" >预览</span></td>
                              <td style="border:none;"><span class="btn blue left" id="saveForm" >保存</span></td>
                          </tr>
                      </tbody>
                  </table>
              </div>
        </div>
  
        <div id="right">
            <div class="form-attr" #formAttr *ngIf="isFormAttrHide==0">
                  <h3 class="fields-group">表单属性</h3>
                  <ul padding>
                    <li>
                      <label>表单名称</label>
                      <input type="text" name="title" id="title" [(ngModel)]="currentTable.title"/>
                    </li>
                    <li>
                        <label>表空间名称</label>
                        <input type="text" name="tableSpaceName" id="tableSpaceName"[(ngModel)]="currentTable.tableSpaceName"/>
                      </li>
                      <li>
                          <label>表名称</label>
                          <input type="text" name="tableName" id="tableName"[(ngModel)]="currentTable.tableName"/>
                        </li>
                    <li>
                        <label>表单描述</label>
                        <textarea name="comment" id="comment" [(ngModel)]="currentTable.comment"></textarea>
                    </li>
                  </ul>
            </div>
           <div class="row-attr" #rowAttr *ngIf="isRowAttrHide==0">
                  <h3 class="fields-group">行属性</h3>
                  <ul padding>
                      <li>
                          <label>高度</label>
                          <input type="text" [(ngModel)]="currentRow.lineHeight"/>px
                      </li>
                      <li>
                          <button (click)="saveRow()">保存</button>
                      </li>
                  </ul>
           </div>
           <div class="col-attr" #colAttr *ngIf="isColAttrHide==0">
                  <h3 class="fields-group">字段属性</h3>
                  <ul>
                    <li>
                      <label>字段标题</label>
                      <input type="text" name="label" id="label" (change)="setText()" [(ngModel)]="currentCol.label"/>
                    </li>
                    <li>
                        <label>字段名称</label>
                        <input type="text" name="fieldName" id="fieldName"[(ngModel)]="currentCol.fieldName"/>
                      </li>
                      <li>
                          <label>控件类型</label>
                          <input type="text" name="controlType" id="controlType"[(ngModel)]="currentCol.controlType"/>
                        </li>
                        <li>
                              <label>数据源地址</label>
                              <input type="text" name="dicHref" id="dicHref"[(ngModel)]="currentCol.dicHref"/>
                        </li>
                        <li>
                            <label>字典关键字</label>
                            <input type="text" name="dicContent" id="dicContent"[(ngModel)]="currentCol.dicContent"/>
                      </li>
                      <li>
                          <label>显示字段</label>
                          <input type="text" name="dicTitleColumn" id="dicTitleColumn"[(ngModel)]="currentCol.dicTitleColumn"/>
                      </li>
                      <li>
                          <label>传值字段</label>
                          <input type="text" name="dicValueColumn" id="dicValueColumn"[(ngModel)]="currentCol.dicValueColumn"/>
                      </li>
                      <li>
                          <label>提示内容</label>
                          <input type="text" name="validateContent" id="validateContent"[(ngModel)]="currentCol.validateContent"/>
                      </li>
                      <li>
                          <label>校验正则表达式类型</label>
                          <input type="text" name="validateType" id="validateType"[(ngModel)]="currentCol.validateType"/>
                      </li>
                      <li>
                          <label>最短长度</label>
                          <input type="text" name="minLength" id="minLength"[(ngModel)]="currentCol.minLength"/>
                      </li>
                      <li>
                          <label>最大长度</label>
                          <input type="text" name="length" id="length"[(ngModel)]="currentCol.length"/>
                      </li>
                      <li>
                          <label>小数位数</label>
                          <input type="text" name="scale" id="scale"[(ngModel)]="currentCol.scale"/>
                      </li>
                      <li>
                          <label>默认值</label>
                          <input type="text" name="defaultValue" id="defaultValue"[(ngModel)]="currentCol.defaultValue"/>
                      </li>
                      <li>
                          <label>外键表</label>
                          <input type="text" name="forignTable" id="forignTable"[(ngModel)]="currentCol.forignTable"/>
                      </li>
                      <li>
                          <label>外键字段</label>
                          <input type="text" name="forignField" id="forignField"[(ngModel)]="currentCol.forignField"/>
                      </li>
                      <li>
                          <label>单位</label>
                          <input type="text" name="unit" id="unit"[(ngModel)]="currentCol.unit"/>
                      </li>
                      <li>
                          <label>显示比例</label>
                          <select [(ngModel)]="currentCol.spacePercent">
                              <option value="12">整行</option>
                              <option value="6">整行的1/2</option>
                              <option value="4">整行的1/3</option>
                              <option value="3">整行的1/4</option>
                          </select>
                      </li>
                      <li>
                          <label>表单是否显示</label>
                          <input type="radio" name="isShow" value='1' [(ngModel)]="currentCol.isShow" id="show"/><label for="show">是</label>
                          <input type="radio" name="isShow" value='0' [(ngModel)]="currentCol.isShow" id="notShow"/><label for="notShow">否</label>
                      </li>  
                      <li>
                          <label>列表是否显示</label>
                          <input type="radio" name="isList" value='1' [(ngModel)]="currentCol.isList" id="list"/><label for="list">是</label>
                          <input type="radio" name="isList" value='0' [(ngModel)]="currentCol.isList" id="notlist"/><label for="notlist">否</label>
                      </li>  
                      <li>
                          <label>是否查询条件</label>
                          <input type="radio" name="isSearch" value='1' [(ngModel)]="currentCol.isSearch" id="search"/><label for="search">是</label>
                          <input type="radio" name="isSearch" value='0' [(ngModel)]="currentCol.isSearch" id="notSearch"/><label for="notSearch">否</label>
                      </li>  
                      <li>
                          <label>是否开始时间</label>
                          <input type="radio" name="isStart" value='1' [(ngModel)]="currentCol.isStart" id="startTime"/><label for="startTime">是</label>
                          <input type="radio" name="isStart" value='0' [(ngModel)]="currentCol.isStart" id="notStartTime"/><label for="notStartTime">否</label>
                      </li>  
                      <li>
                          <label>是否结束时间</label>
                          <input type="radio" name="isEnd" value='1' [(ngModel)]="currentCol.isEnd" id="endTime"/><label for="endTime">是</label>
                          <input type="radio" name="isEnd" value='0' [(ngModel)]="currentCol.isEnd" id="notEndTime"/><label for="notEndTime">否</label>
                      </li>  
                    <li>
                        <label>字段备注</label>
                        <textarea name="commentCol" id="commentCol" [(ngModel)]="currentCol.commentCol"></textarea>
                    </li>
                    <li>
                          <button (click)="saveCol()">保存</button>
                      </li>
                  </ul>
           </div>
        </div>
  
      </div>
  
  <!--
  
    <button ion-button secondary menuToggle>Toggle Menu</button>
    <myDrag style="height:200px;width:200px;position: absolute;background-color:#f60;"></myDrag>
    <myDrag style="height:200px;width:200px;position: absolute;background-color:#eee;"></myDrag>
  -->
  </ion-content>
  